// Container and layout
.container {
  max-width: 384px; // 24rem = 24 * 16px = 384px
  margin: 0 auto;
  padding: 0 16px; // 1rem = 16px
  position: relative;
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; // 防止整个容器滚动
}

// Header styles
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0 16px; // 去掉下padding
  font-size: 18px; // 1.125rem = 1.125 * 16px = 18px
  background-color: var(--theme-bg-primary);
  border-bottom: 1px solid var(--theme-border-primary);
  // 添加安全区域支持
  padding-top: calc(16px + env(safe-area-inset-top));
  height: calc(43px + env(safe-area-inset-top));
  border: none !important;
  // 确保在移动端正确显示
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.topTabs {
  display: flex;
  align-items: center;
  gap: 16px; // 1rem = 16px
}

.tabLink {
  font-weight: bold;
  padding-bottom: 8px; // 0.5rem = 8px
  text-decoration: none;
  cursor: pointer;
}

.activeTab {
  color: var(--theme-primary);
  border-bottom: 2px solid var(--theme-primary);
}

.inactiveTab {
  color: var(--theme-text-muted);
}

.categoryToggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px; // 0.25rem = 4px
  color: var(--theme-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  
  &:hover {
    color: var(--theme-primary);
  }
  
  &:focus {
    outline: none;
  }
}

.categoryText {
  font-size: 14px; // 0.875rem = 0.875 * 16px = 14px
}

.selectedCountBadge {
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  line-height: 1;
  padding: 1px 6px;
  border-radius: 10px;
  background-color: var(--theme-primary);
  color: white;
  min-width: 16px;
  height: 16px;
}

// Search container
.searchWrapper {
  position: fixed;
  top: calc(50px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 99;
  background-color: var(--theme-bg-primary);
  padding: 16px 16px 16px 16px; // 确保所有方向都有padding
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--theme-border-primary);
  // 确保在移动端正确显示
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  min-height: 60px; // 最小高度而不是固定高度
}

.searchBar {
  background-color: var(--theme-bg-input) !important;
  border-radius: 100px !important;
  
  :global {
    .adm-search-bar {
      background-color: var(--theme-bg-input) !important;
      background: var(--theme-bg-input) !important;
      border-radius: 100px !important;
    }
    
    .adm-search-bar-active {
      background-color: var(--theme-bg-input) !important;
      background: var(--theme-bg-input) !important;
      border-radius: 100px !important;
    }
    
    .adm-search-bar-input-box {
      background-color: var(--theme-bg-input) !important;
      background: var(--theme-bg-input) !important;
      border-radius: 100px !important;
    }
    
    .adm-input-element {
      color: var(--theme-text-primary) !important;
      background-color: transparent !important;
      background: transparent !important;
      
      &::placeholder {
        color: var(--theme-text-muted) !important;
      }
      
      &:focus {
        color: var(--theme-text-primary) !important;
        background-color: transparent !important;
        background: transparent !important;
      }
    }
    
    .adm-search-bar-cancel {
      color: var(--theme-text-primary) !important;
      font-size: 14px !important;
    }
    
    .adm-search-bar-cancel-button {
      color: var(--theme-text-primary) !important;
    }
    
    .adm-search-bar-clear {
      color: var(--theme-text-muted) !important;
    }
  }
}

// Main content
.mainContent {
  position: absolute;
  top: calc(50px + env(safe-area-inset-top) + 92px); // header height + searchWrapper height
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; // 1rem = 16px
  padding: 16px 0 96px 0; // 顶部padding + 底部为footer预留空间
  overflow-y: auto; // 只有这个区域可以滚动
  -webkit-overflow-scrolling: touch; // iOS平滑滚动
}

// Original styles preserved for backward compatibility
.headerWrap {
  position: sticky;
  top: 0;
  z-index: 2; 
  background: var(--theme-text-primary);
  :global {
    .adm-badge-dot {
      min-width: 0;
    }
  }
  .headerPublicNavItem {
    font-family: 'TsangerYuYangT' , 'TsangerYuYangT';
    font-weight: normal;
    font-size: 20px;
  }
  .headerCommonNavItem {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 16px;
  }
  .navItemActiveClass {
    color: var(--theme-text-dark);
    // font-size: 20px;
  }
  .navItemCommonClass {
    color: var(--theme-text-muted);
  }
  .headerNavItem {
    position: relative;
    .headerBadge {
      position: absolute;
      top: -2px;
      right: -10px;
      width: 6px;
      height: 6px;;
    }
  }
}

.crad_body {
    :global {
        .adm-card-body {
            padding: 0;
        }
    }

    margin-top: 10px;
    margin-bottom: 10px;

    .bout_content {
        display: flex;
        width: 100%;
        overflow-x: scroll;
    }

    .recommend_body {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        background-color: var(--theme-bg-secondary);
    }

}

// 分类筛选模态框样式
.categoryOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
}

.categoryPanel {
  position: fixed;
  top: calc(120px + env(safe-area-inset-top)); // 距离顶部的位置：header + searchWrapper
  right: 16px;
  left: 16px;
  max-width: 384px;
  margin: 0 auto;
  z-index: 210;
}

.categoryModal {
  background-color: var(--theme-bg-secondary);
  border: 1px solid var(--theme-border-primary);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.categoryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--theme-border-secondary);
}

.categoryTitle {
  font-size: 14px;
  color: var(--theme-text-muted);
}

.categoryControls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modeToggle {
  display: flex;
  background-color: var(--theme-bg-card);
  border-radius: 20px;
  padding: 2px;
}

.modeButton {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modeButtonActive {
  background-color: var(--theme-primary);
  color: white;
}

.modeButtonInactive {
  background-color: transparent;
  color: var(--theme-text-muted);
}

.closeButton {
  color: var(--theme-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:hover {
    color: white;
  }
}

.categoryContent {
  padding: 12px 16px;
}

.tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tagButton {
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 16px;
  border: 1px solid var(--theme-border-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tagButtonUnselected {
  background-color: var(--theme-bg-card);
  color: var(--theme-text-muted);
  
  &:hover {
    border-color: var(--theme-primary);
    color: white;
  }
}

.tagButtonSelected {
  background-color: var(--theme-primary);
  color: white;
  border-color: var(--theme-primary);
}

.categoryFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--theme-border-secondary);
}

.clearButton {
  font-size: 12px;
  color: var(--theme-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  
  &:hover {
    color: white;
  }
}

.applyButton {
  font-size: 12px;
  background-color: var(--theme-primary);
  color: white;
  border: none;
  border-radius: 16px;
  padding: 4px 12px;
  cursor: pointer;
  
  &:hover {
    background-color: var(--theme-primary-dark);
  }
}
.loadingContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loadingText {
  color: var(--theme-text-primary);
  font-size: 14px;
  opacity: 0.8;
}
:global{

  .adm-modal{
    border-radius: 50% !important;
    .adm-center-popup-wrap{
      border-radius: 50% !important;
    }
  }
  .adm-modal-body{
    border-radius: 16px !important;
    background-color: var(--theme-bg-primary) !important;
  }
  .adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input{
    background-color: transparent !important;
    border: none !important;
  }
  .adm-sesrch-bar-active .adm-search-bar-input-box{
    background-color: transparent !important;
    border: none !important;
  }
}